<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>小鹿直播--专业的美妆直播平台</title>
    <meta name="format-detection" content="telephone=no">
    <script src="__GLOBAL__/jquery-1.8.3.min.js"></script>
    <script src="__GLOBAL__/common.js"></script>
    <script src="__GLOBAL__/swiper-3.4.0.jquery.min.js"></script>

    <link rel="stylesheet" href="__GLOBAL__/reset.css"/>
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__GLOBAL__/swiper-3.4.0.min.css">
    <!--<link rel="stylesheet" href="__GLOBAL__/media.css"/>-->
    <link href="__CSS__/index.css" rel="stylesheet"/>
    <script src="__JS__/index.js"></script>
    <style>

    </style>
</head>
<body>
  <!--头部-->
  <div class="top">
      <div class="top-center">
          <span>
             <a class="active">直播</a>
          </span>
          <span>
               <a href="javascript:alert('暂未开放');">视频</a>
          </span>
     </div>
  </div>
  <div class="top-fill"></div>
  <!--banner广告-->
  <div class="banner">
      <div class="swiper-container swiper-container-h">
          <div class="swiper-wrapper">
              <div class="swiper-slide">
                  <img src="__IMG__/index/banner1.png"/>
              </div>
              <div class="swiper-slide">
                  <img src="__IMG__/index/banner1.png"/>
              </div>
              <div class="swiper-slide">
                  <img src="__IMG__/index/banner1.png"/>
              </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
      </div>
  </div>
  <!--直播列表-->
  <div class="live-list">
    <!--列表 start---->
    {volist name="list" id="vo"}
     <div class="line-box">
          <div class="top-msg flex">
              <div class="msg-photo">
                  <img src="{$vo.shop.head_img}"/>
              </div>
              <div class="msg-txt flex1">
                  <p class="msg-name">
                     {$vo.speaker}
                  </p>
                  <p>
                      {$vo.shop.shop_name}
                  </p>
              </div>
              <div class="zan-num">
                  <i class="zan-icon"></i>
                  <span>{$vo.like_num}人</span>
              </div>
          </div>
          <div class="live-title">
              <span class="live-label">
                {eq name="vo.scene" value="1"}
                【活动】
                 {else /}
                 【会议】
                {/eq}
              </span>
              {$vo.activity_name}
          </div>
          <div class="goods-box flex">
              <div class="goods-img flex1">
                  <img src="{$vo.cover_img}"/>
              </div>
              <!--商品-->
              <div class="goods-preview">
                  <div class="swiper-container swiper-container-v">
                      <div class="swiper-wrapper">
                        {volist name='vo.goods' id='g'}
                           <div class="swiper-slide">
                              <img src="{$g.cover_img}"/>
                          </div>
                        {/volist}
                      </div>
                  </div>
              </div>
          </div>
          <div class="live-data flex">
              <div class="live-browser flex1">
                  <i class="browser-icon"></i>{$vo.audience_num}人
              </div>
              <div class="live-data-right">
                {eq name='vo.attribute' value='3'}
                  <div class="live-charge"><i class="charge-icon"></i>收费</div>
                  {/eq}
                  {eq name='vo.attribute' value='2'}
                  <div class="live-lock"><i class="lock-icon"></i>已锁定</div>
                  {/eq}
              </div>
          </div>
      </div>

    {/volist}
 
<!--列表 end---->

  </div>
  <!--底部-->
  <div class="bottom-fill"></div>
  <div class="bottom flex">
      <div class="flex1">
          <a>
              <div class="nav-content">
                  <i class="home-icon"></i>
                  <p class="p-active">主页</p>
              </div>
          </a>
      </div>
      <div class="flex1">
          <div class="main-box">
            <i class="play-icon"></i>
          </div>
      </div>
      <div class="flex1">
          <a>
            <div class="nav-content">
                <i class="h-me-icon"></i>
                <p>我的</p>
            </div>
          </a>
      </div>
  </div>
  <!--遮罩层-->
  <div class="alert-bg"></div>
  <!--输入密码弹窗-->
  <div class="live-alert">
      <div class="alert-content">
          <p class="alert-title">输入密码</p>
          <p class="alert-tip">提示：提示这个密码来自于哪儿，为了你能看好直播什么的</p>
          <input class="password" type="number" placeholder="&nbsp;请输入密码">
          <div class="sure-btn">确定</div>
      </div>
  </div>
  <script>



  </script>
</body>
</html>